<template>
  <MainContainer class="p-5">
    <div class="flex">
      <el-button type="primary" class="mb-2" @click="handleOpenDialog(0)"
        >添加菜单</el-button
      >
    </div>
    <el-tree
      ref="treeRef"
      v-loading="loading"
      :data="list"
      :props="defaultProps"
      highlight-current
      node-key="id"
      accordion
    >
      <template #default="{ node, data }">
        <div class="flex justify-between w-full">
          <div class="text-sm">{{ node.label }}</div>
          <div>
            <el-button
              link
              class="!text-[#707bdf]"
              @click.stop="handleOpenDialog(data.id)"
              >添加下级</el-button
            >
            <el-button
              link
              class="!text-[#707bdf]"
              @click.stop="openDialog(data.id)"
              >编辑</el-button
            >
            <el-button link @click.stop="handleDelete(data.id)">删除</el-button>
          </div>
        </div>
      </template>
    </el-tree>
    <MyFormDialog
      v-model:visible="dialogVisible"
      v-model:form-data="formData"
      :title="dialogTitle"
      :options="formOptions"
      :loading="loading"
      @confirm="handleConfirm"
    ></MyFormDialog>
  </MainContainer>
</template>
<script setup lang="jsx">
import MainContainer from "@/components/MainContainer.vue";
import {
  fetchTreeList,
  getMenu,
  deleteMenu,
  createMenu,
  updateMenu,
} from "@/api/menu.js";
import MyFormDialog from "@/components/MyFormDialog.vue";
import useCRUD from "@/composables/useCRUD.js";
import { ref } from "vue";

const defaultProps = {
  children: "children",
  label: "title",
};

const parentMenu = ref("无");

const formOptions = [
  {
    prop: "title",
    label: "菜单名称",
    rules: {
      required: true,
      message: "必填",
    },
  },
  {
    prop: "parentMenu",
    label: "上级菜单",
    customRender() {
      return <span>{parentMenu.value}</span>;
    },
  },
  {
    prop: "name",
    label: "前端名称",
    rules: {
      required: true,
      message: "必填",
    },
  },
  {
    prop: "hidden",
    label: "是否隐藏",
    rules: {
      required: true,
      message: "必填",
    },
    customRender() {
      return (
        <el-radio-group>
          <el-radio label={1}>是</el-radio>
          <el-radio label={0}>否</el-radio>
        </el-radio-group>
      );
    },
  },
];

async function getMenuById(id) {
  if (!id) {
    parentMenu.value = "无";
    return;
  }
  const res = await getMenu(id);
  parentMenu.value = res.data.title;
}

function handleOpenDialog(id) {
  getMenuById(id);
  formData.value.parentId = id;
  openDialog();
}

const crudOptions = {
  queryApi: fetchTreeList,
  newParams: { page: null, limit: null },
  createApi: createMenu,
  deleteApi: deleteMenu,
  getOneApi: getMenu,
  updateApi: updateMenu,
};
const {
  handleQuery,
  list,
  loading,
  openDialog,
  dialogVisible,
  handleDelete,
  formData,
  handleConfirm,
  dialogTitle,
} = useCRUD(crudOptions);

handleQuery();
</script>
